<template>
	<view class="page">
		<Header :title="'转赠'"></Header>
		<view class="main">
			<view class="bgBox">
				<image class="bgPic" src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/438120e63cfea2b20368aa41bbacdb4.png" mode="aspectFill"></image>
				<view class="textBox">
					<view class="textItem" @click="select(1)" :style="cont=='转赠' ? 'color: #ffff31;':''">
						<!-- <view class="num">
							{{property[0].property2}}
						</view> -->
						<view>
							转赠
						</view>
					</view>
					<view class="textItem" @click="select(2)" :style="cont=='被转赠' ? 'color: #ffff31;':''">
						<!-- <view class="num">
							{{property[1].property2}}
						</view> -->
						<view>
							被转赠
						</view>
					</view>
				</view>
			</view>
			<view class="tabBox">
				<u-tabs class="tabs" lineHeight="6rpx" :list="tabList" @change="changeTabs" :scrollable="false"
					lineColor="#00A0E9" itemStyle="height:88rpx;" :current="current" :activeStyle="{
				    color: '#019FE8'}" :inactiveStyle="{
				    color: '#000000'}"></u-tabs>
			</view>
			<view class="content">
				<swiper class="swiper" :current="current" @change="currentChange" :circular="false" :duration="300">
					<swiper-item class="swiperItem" v-for="ikey in 3">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="ReachBottom">
							<view class="cardList" v-if="list.length>0">
								<view class="cardItem" v-for="item in list" @click="toDate(item)">
									<image class="cardPic" :src="item.imgId" mode="aspectFill"></image>
									<view class="">
										{{item.presentedName}}
									</view>
									<view class="name">
										{{item.merchantName}}
									</view>
									<view class="">
										<view class="price">
											￥{{item.money}}
										</view>
									</view>
									
									<view class="giveUser">
										{{item.byPresentedName ? '被赠予：'+item.byPresentedName :'赠予：'+item.presentedName}}
									</view>
								</view>
								<!-- 	<view class="loadmoreBox" >
									<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
								</view> -->
							</view>
							<u-empty v-else
							        mode="data"
							        icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view class="submitBtnBox">
				<view class="submitBtn" @click="goGiveFriend">
					赠送好友
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				cont: '转赠',
				tabList: [{
					name: '未接受'
				}, {
					name: '已接受'
				}, {
					name: '已拒绝'
				}],
				current: 0,
				list: [],

				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				pageSize: 6,
				pageNum: 1,
				total: 0,
				list: [],
				property:{
					property1:0,
					property2:0
				}
			}
		},
		onShow() {
			this.cread()
			this.tongji()
		},
		methods: {
			async tongji(){
				let res = await this.$api.request('manage/presented/client/statistics')
				this.property =res.data
			},
			async  select(e){
				if(e==1){
					this.cont='转赠'
					this.cread()
				}else{
					this.cont='被转赠' 
					this.cread1()
				}
			},
			async cread() {
				//转赠
				let res = await this.$api.request('manage/presented/client/list','get',{state:this.current})
				this.list = res.data.list
			},
			async cread1() {
				//被转赠
				let res = await this.$api.request('manage/presented/client/byList','get',{state:this.current})
				this.list = res.data.list
			},
			toDate(e){
				uni.navigateTo({
					url:'/pages/givePresent/giveDate/giveDate?id='+e.id+'&cont='+this.cont
				})
			},
			goGiveFriend() {
				uni.navigateTo({
					url: '/pages/givePresent/giveFriend'
				})
			},
			changeTabs(e) {
				this.current = e.index
				if(this.cont=='转赠'){
					this.cread()
				}else{
					this.cread1()
				}
			},
			currentChange(e) {
				this.current = e.detail.current
				this.list = []
			},
			
			
			ReachBottom() {
				// 	let that = this;
				// 	if (this.shopList.length == this.total || this.shopList.length > this.total) {
				// 		this.status = 'nomore'
				// 		return; //没有更多数据时  中止执行后续代码
				// 	}
				// 	console.log('触发了')

				// 	this.status = 'loading'; //设置触底加载组件状态 为正在加载
				// 	this.pageNum = ++this.pageNum; //请求下一页

				// 	that.getList(); //请求的接口数据
				// 	if (this.shopList.length == this.total) {
				// 		this.status = 'nomore'
				// 	} else {
				// 		this.status = 'loading'
				// 	};

			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		width: 100vw;
		background-color: #FFFFFF;
	}

	.loadmoreBox {
		margin: 0 auto;
	}

	.main {

		.submitBtnBox {
			box-sizing: border-box;
			width: 100%;
			padding: 20rpx 43rpx;
			position: fixed;
			bottom: 3%;

			.submitBtn {
				width: 664rpx;
				height: 80rpx;
				background: #E8220F;
				border-radius: 40rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.tabBox {
			width: 100%;

			padding: 0 175rpx;
			box-sizing: border-box;

		}

		.content {
			width: 100%;
			padding: 20rpx 80rpx 0;
			box-sizing: border-box;

			.swiper {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				height: calc(100vh - 570rpx);

				.swiperItem {

					.cardList {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.cardItem {
							// height: 397rpx;
							width: 300rpx;
							background: #F7F8FC;
							box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
							border-radius: 20rpx;
							display: flex;

							flex-direction: column;
							padding: 23rpx 32rpx 20rpx 32rpx;
							box-sizing: border-box;
							margin-bottom: 35rpx;

							.cardPic {
								width: 100%;
								height: 203rpx;
								margin-bottom: 21rpx;
							}

							.name {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333333;
								margin-bottom: 24rpx;
							}

							.price {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #DC1010;
								margin-bottom: 24rpx;
							}

							.giveUser {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}
				}
			}
		}

		.bgBox {
			height: 205.9rpx;
			width: 750rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10rpx;
			z-index: 0;

			.bgPic {
				position: absolute;
				z-index: 100;
				height: 205.9rpx;
				width: 750rpx;
			}

			.textBox {
				position: relative;
				z-index: 200;
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding-left: 179rpx;
				padding-right: 211rpx;
				box-sizing: border-box;

				.textItem {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.num {
						margin-bottom: 12rpx;
					}

				}
			}

		}

	}
</style>